import { sendSmsCode } from '@/api/new.js';
<template>
	<view class="login-container">
		
		<u-form :model="loginForm" label-width="60" :rules="rules" ref="loginForm">
			<u-form-item prop="tel" label="手机号">
				<u-input v-model="loginForm.tel" border="bottom" placeholder="请输入手机号"></u-input>
			</u-form-item>
			<u-form-item prop="code" label="验证码">
				<u-input v-model="loginForm.code" border="bottom" placeholder="请输入验证码">
					<template slot="suffix">
						<u-code
							ref="uCode"
							@change="codeChange"
							seconds="60"
							changeText="60秒重新获取哈哈哈"
						></u-code>
						<u-button
							@tap="getCode"
							:text="tips"
							type="primary"
							size="mini"
						></u-button>
					</template>
				</u-input>
			</u-form-item>
		</u-form>
		<u-gap height="20"></u-gap>
		<button class="btn" @click="handleLogin" :disabled="!loginForm.code&&!loginForm.tel">登录</button>
	</view>
</template>

<script>
	import store from '../../store';
	export default {
		data() {
			return {
				loginForm:{
					tel:null,
					code:null,
				},
				tips:'获取验证码',
				rules: {
					tel: [
						{
							type: 'string',
							required: true,
							message: '请填写手机号',
							trigger: ['blur', 'change']
						},
						{
							type:'string',
							parttern: /^1[3456789]\d{9}$/,
							max: 11,
							min: 11,
							required: true,
							message: '手机号格式不正确',
							trigger: ['blur', 'change']
						}
					],
					code: {
						type: 'string',
						min: 6,
						max: 6,
						required: true,
						message: '请填写验证码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods:{
			codeChange(text) {
				this.tips = text;
			},
			generateRandomCode() {
                const length = 6;
                const characters = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
                let result = '';
                for (let i = 0; i < length; i++) {
                    result += characters.charAt(Math.floor(Math.random() * characters.length));
                }
                return result;
            },
			getCode() {
				if (!this.loginForm.tel) {
					this.$u.toast('请输入手机号');
					return;
				}
				if (!/^1[3456789]\d{9}$/.test(this.loginForm.tel)) {
					this.$u.toast('手机号格式不正确');
					return;
				}
				// 生成随机验证码
				const code = this.generateRandomCode();
				this.loginForm.code = code;
				this.$u.toast(`验证码已生成: ${code}`);
				this.$refs.uCode.start();
			},
			handleLogin(){
				
				console.log('loginForm:',this.loginForm);
				this.$refs.loginForm.validate().then(res=>{
					console.log('res:',res);
					this.$u.toast('登录成功');
					store.commit('setLogin',true)
					setTimeout(() => {
						console.log(store.state.isLogin);
						uni.navigateBack({ delta: 1 })
					}, 1000);
				}).catch(err=>{
					console.log('err:',err);
					this.$u.toast('请填写正确的手机号和验证码');
				})
			}
		},
		watch: {
		    'loginForm.code': function(newVal, oldVal) {
		        this.$refs.loginForm.validateField('code');
		    }
		},
	}
</script>

<style lang="scss">
.login-container{
	padding: 20rpx 50rpx;
	.code-item{
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		right: 50rpx;
		color: #4c7ee9;
	}
	.btn{
		width: 100%;
		height: 80rpx;
		text-align: center;
		color: #fff;
		line-height: 80rpx;
		border-radius: 80rpx;
		background: linear-gradient(90deg,#f16017,#ebb390);
	}
} 

</style>
